<template>

  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>生活吐槽</span>
    </div>

    <mavon-editor codeStyle="dracula" :placeholder="initEditHtml">
    </mavon-editor>

    <article>
      <!-- 评论列表 -->
      <div class="comm-list">
        <div class="left-img">
          <img src="https://q.qlogo.cn/g?b=qq&nk=704729872&s=40" style=""/>
        </div>
        <section class="right-content">
          <h5 style="color: #d1694f">曾小晨</h5>
          <p>今天天气很好</p>
        </section>
        <time>2018-08-01</time>
      </div>
      <div class="comm-list">
        <div class="left-img">
          <img src="https://q.qlogo.cn/g?b=qq&nk=704729872&s=40" style=""/>
        </div>
        <section class="right-content">
          <h5 style="color: #d1694f">曾小晨</h5>
          <p>今天天气很好</p>
        </section>
        <time>2018-08-01</time>
      </div>
      <div class="comm-list">
        <div class="left-img">
          <img src="https://q.qlogo.cn/g?b=qq&nk=704729872&s=40" style=""/>
        </div>
        <section class="right-content">
          <h5 style="color: #d1694f">曾小晨</h5>
          <p>今天天气很好 <code>coding</code></p>
        </section>
        <time>2018-08-01</time>
      </div>
    </article>
  </el-card>
</template>

<script>
  export default {
    name: "speak", // 吐槽页
    data() {
      return {
        initEditHtml: '随便说点什么'
      }
    }
  }
</script>

<style lang="scss" scoped>

  .comm-list {
    margin-top: 20px;
    clear: both;
    overflow: hidden;
    border-top: 1px solid #f2f2f2;
    padding-top: 20px;
    @at-root {
      .left-img {
        float: left;
        width: 40px;
        height: 40px;
        img {
          border-radius: 5px;
          width: 100%;
          height: 100%;
        }
      }
      .right-content, time {
        margin-left: 45px;
      }
      time {
        font-size: 12px;
        color: #b0b2b7;
      }
    }
  }


</style>
